<template>
    <div>
        <p class="title"><i></i>疫情地图</p>
        <Tabs :currentIndex="currentIndex" @onIndex="getIndex">
            <Tab index="1" label="国内疫情">
                <div id="chinaMap"></div>
            </Tab>
            <Tab index="2" label="国外疫情">
                <div id="worldMap"></div>
            </Tab>
        </Tabs>
    </div>
</template>

<script>
import Tab from './tabs/tab'
import api from '../api'

export default {
  components: { Tab },
    name: 'Map',
    data() {
        return {
            currentIndex: '1'
        }
    },
    mounted() {
        // api.getNcovCity({
        //     key: '62e34ad34025d5d5127135efa58d4ca8'
        // }).then(res => {
        //     // console.log(res)
        //     let allCitys = []
        //     for(let i = 0; i < res.data.newslist.length; i++) {
        //         let temp = {
        //             name: res.data.newslist[i].provinceShortName,
        //             value: res.data.newslist[i].currentConfirmedCount,
        //         }
        //         allCitys.push(temp)
        //     }
        //     this.$charts.chinaMap("chinaMap", allCitys)
        // }).catch(err => {
        //     console.log(err)
        // }),

        api.getNcovabroad({
            key: '5204662667db1dc1ee2a28bbf7207d7f'
        }).then(res => {
            // console.log(res)
            let allCountry = []
            for(let j = 0; j < res.data.newslist.length; j++) {
                let temp = {
                    name: res.data.newslist[j].provinceName,
                    value: res.data.newslist[j].currentConfirmedCount,
                }
                allCountry.push(temp)
            }
            // console.log(allCountry)
            this.$charts.worldMap("worldMap", allCountry)
        }).catch(err => {
            console.log(err)
        })
    },
    methods: {
        getIndex(index) {
            // console.log(index)
            this.currentIndex = index
        }
    },
}
</script>

<style scoped>
#chinaMap {
    width: 375px;
    height: 400px;
}
#worldMap {
    width: 375px;
    height: 400px;
}
.title {
    border-top: 0.005rem solid #ebebeb;
    border-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 0.44rem;
    padding: 0 0.16rem;
    font-weight: 500;
    font-size: 0.17rem;
    line-height: 0.44rem;
    background: #fff;
}

.title::before {
    content: "";
    width: 5px;
    height: 20px;
    background: #4169e2;
    margin-right: 10px;
}
</style>